<template>
  <div class="RecGoodsList">
    <div class="goods" v-for="item in items" :key="item.id">
      <router-link :to="{ path: '/Xq', query: { id: item.id } }">
        <img :src="item.img" alt="" />
        <div class="goods-info">
          <div class="name">{{ item.name }}</div>
          <div class="description">{{ item.texte }}</div>
          <div class="price">￥{{ item.money }}</div>
        </div>
      </router-link>
    </div>
    <!-- <div class="goods">
      <img
        src="https://img.youpin.mi-img.com/shopmain/2ef2ea160f3a527d0e8896f765ccb030.jpg"
        alt=""
      />
      <div class="goods-info">
        <div class="name">男士外衣</div>
        <div class="description">大写的CK依然经典</div>
        <div class="price">￥36</div>
      </div>
    </div>
    <div class="goods">
      <img
        src="https://img.youpin.mi-img.com/shopmain/2ef2ea160f3a527d0e8896f765ccb030.jpg"
        alt=""
      />
      <div class="goods-info">
        <div class="name">男士外衣</div>
        <div class="description">大写的CK依然经典</div>
        <div class="price">￥36</div>
      </div>
    </div> -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "RecGoodsList",
  data() {
    return {
      items: [],
    };
  },
  created() {
    axios({
      method: "get",
      url: "/liebiao",
    }).then((res) => {
      this.items = res.data;
    });
  },
};
</script>
<style  scoped>
.RecGoodsList {
  display: flex;
  padding: 0.12rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.RecGoodsList .goods {
  border-radius: 0.08rem;
  background-color: #fff;
  margin-bottom: 0.1rem;
}
.RecGoodsList .goods img {
  width: 1.89rem;
  height: 1.89rem;
  border-radius: 0.08rem 0.08rem 0px 0px;
}
.RecGoodsList .goods .goods-info {
  box-sizing: border-box;
  padding: 0.08rem;
}
.RecGoodsList .goods .goods-info .name {
  line-height: 0.28rem;
  font-size: 0.16rem;
  flex-wrap: 500;
  overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
  width: 1.6rem;
}
.RecGoodsList .goods .goods-info .description {
  font-size: 0.12rem;
  color: rgba(0, 0, 0, 0.6);
}
.RecGoodsList .goods .goods-info .price {
  color: rgb(248, 36, 0);
  font-size: 18px;
}
</style>


